<template>
  <div class="table-main">
    <div class="query-content">
      <div class="query-search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="" style="width: 100%;">
            <el-input v-model="formInline.standardName" placeholder="请输入标准名称" style="min-width: 300px" />
          </el-form-item>
        </el-form>
      </div>
      <div class="query-btn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
      <el-table-column width="70" label="序号" align="center">
        <template #default="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="standardProjectName" width="560" label="标准名称" align="center" />
      <el-table-column prop="solicitOpinionsStatus" width="140" label="征求状态" align="center"></el-table-column>
      <el-table-column prop="solicitOpinionsDeadline" width="180" label="截止日期" align="center" />
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" @click="showDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-content">
      <el-config-provider :locale="zhCn">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 100]"
          :small="small" background layout="sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-config-provider>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";

import axios from "axios";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { useRouter } from "vue-router";
const router = useRouter();
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const formInline = reactive({
  standardName: "",
});
const small = ref(false);

const showDetail = (value: any) => {
  router.push({
    path: "/standardManager/solicitOpinions/detail",
    query: { id: value.progressId },
  });
  // window.open(fileUrl.value, '_blank'); // 使用_blank在新窗口中打开
};

const onSubmit = () => {
      currentPage.value = 1;
  initData();
};
const onReset = () => {
  formInline.standardName = "";
  currentPage.value = 1;
  initData();
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  initData();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  initData();
};
const initData = async () => {
  try {
    const response = await axios.get(
      serverUrl + "external/standard/draft/list",
      {
        params: {
          standardName: formInline.standardName,
          pageNum: currentPage.value,
          pageSize: pageSize.value,
        },
      }
    );
    const data = response.data.data.list.map((item: any) => ({
      ...item,
      solicitOpinionsDeadline: item.solicitOpinionsDeadline
        ? item.solicitOpinionsDeadline.substring(0, 10)
        : "",
    }));
    tableData.value = data;
    total.value = response.data.data.total;
    console.log(total.value);
  } catch (error) {
    console.error("数据加载失败:", error);
  }
};
onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  justify-content: space-between;
}

.query-search {
  width: 70%;
}

.query-btn {
  min-width: 145px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

::v-deep .el-table__empty-text {
  color: #666;
  /* 文本颜色 */
  font-size: 16px;
  /* 文本大小 */
  margin: 40px 0;
  /* 上下间距，避免过于紧凑 */
}
</style>